<template>
  <view class="vc elderly-pressable">
    <view class="vc-header">
      <text class="title elderly-text-large">🎤 声控中心</text>
      <view class="voice-status" :class="{ active: listening }">
        <text class="status-text elderly-text">{{listening ? '正在聆听' : '点击说话'}}</text>
      </view>
    </view>
    
    <view class="mic-container">
      <view 
        class="mic elderly-pressable" 
        :class="{ active: listening, recognizing: recognizing }" 
        @touchstart="handleVoiceStart" 
        @touchend="handleVoiceEnd"
        @longpress="handleLongPress"
      >
        <view class="mic-inner">
          <text class="mic-emoji">🎤</text>
        </view>
        <view class="ripple" v-if="listening" />
        <view class="pulse-ring" v-if="listening" />
      </view>
    </view>
    
    <view class="voice-feedback">
      <text class="hint elderly-text">{{getHintText()}}</text>
      <view class="voice-commands" v-if="recognizedText">
        <text class="command-text elderly-text">{{recognizedText}}</text>
      </view>
    </view>
    
    <view class="quick-commands">
      <view class="command-btn elderly-pressable" @tap="sendQuickCommand('我要交电费')">
        <text class="command-icon">⚡</text>
        <text class="command-label elderly-text">交电费</text>
      </view>
      <view class="command-btn elderly-pressable" @tap="sendQuickCommand('帮我叫车')">
        <text class="command-icon">🚗</text>
        <text class="command-label elderly-text">叫车</text>
      </view>
      <view class="command-btn elderly-pressable" @tap="sendQuickCommand('查看健康')">
        <text class="command-icon">❤️</text>
        <text class="command-label elderly-text">健康</text>
      </view>
    </view>
  </view>
</template>

<script>
export default{
  name:'VoiceConsole',
  props:{ listening:Boolean, recognizing:Boolean, recognizedText:String },
  methods: {
    handleVoiceStart() {
      this.$emit('voice-start')
      // 触觉反馈
      if (uni.vibrateShort) {
        try { uni.vibrateShort({ type: 'medium' }) } catch(e){}
      }
    },
    handleVoiceEnd() {
      this.$emit('voice-end')
      // 触觉反馈
      if (uni.vibrateShort) {
        try { uni.vibrateShort({ type: 'light' }) } catch(e){}
      }
    },
    handleLongPress() {
      // 长按功能，可以用于连续语音输入
      console.log('长按语音输入')
    },
    getHintText() {
      if (this.recognizing) return '正在识别您的话...'
      if (this.listening) return '请说话，松开结束'
      if (this.recognizedText) return '识别完成'
      return '按住麦克风说话，或点击快捷指令'
    },
    sendQuickCommand(command) {
      // 发送快捷指令
      this.$emit('quick-command', command)
      // 触觉反馈
      if (uni.vibrateShort) {
        try { uni.vibrateShort({ type: 'light' }) } catch(e){}
      }
    }
  }
}
</script>

<style scoped>
.vc {
  margin: $elderly-spacing-base $elderly-spacing-lg;
  border-radius: $elderly-radius-lg;
  background: $elderly-bg-primary;
  backdrop-filter: blur(16rpx);
  padding: $elderly-spacing-lg;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2rpx solid $elderly-border;
  box-shadow: $elderly-shadow-base;
  min-height: $elderly-touch-xl;
}

.vc-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: $elderly-spacing-base;
  width: 100%;
}

.title {
  color: $elderly-text-primary;
  margin-bottom: $elderly-spacing-xs;
  text-align: center;
}

.voice-status {
  padding: $elderly-spacing-xs $elderly-spacing-sm;
  border-radius: $elderly-radius-base;
  background: $elderly-bg-secondary;
  transition: all 0.3s ease;
}

.voice-status.active {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(0, 212, 255, 0.1));
  border: 2rpx solid $theme-orange;
}

.status-text {
  color: $elderly-text-secondary;
  font-weight: 600;
}

.mic-container {
  position: relative;
  margin: $elderly-spacing-lg 0;
}

.mic {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 100rpx;
  background: linear-gradient(135deg, $theme-orange, $theme-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  box-shadow: $elderly-shadow-lg;
  border: 4rpx solid white;
}

.mic.active {
  animation: pulse 1.2s ease-in-out infinite;
  transform: scale(1.05);
}

.mic.recognizing {
  background: linear-gradient(135deg, $theme-blue, $theme-orange);
  animation: recognizing 0.8s ease-in-out infinite alternate;
}

.mic-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.mic-emoji {
  font-size: $elderly-font-xxl;
}

.ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: ripple 1.4s ease-out infinite;
  z-index: 1;
}

.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 107, 53, 0.6);
  animation: pulse-ring 1.5s ease-out infinite;
  z-index: 0;
}

.voice-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: $elderly-spacing-base 0;
  width: 100%;
}

.hint {
  color: $elderly-text-secondary;
  text-align: center;
  margin-bottom: $elderly-spacing-sm;
}

.voice-commands {
  padding: $elderly-spacing-sm $elderly-spacing-base;
  background: $elderly-bg-secondary;
  border-radius: $elderly-radius-base;
  border: 2rpx solid $theme-blue;
}

.command-text {
  color: $theme-blue;
  font-weight: 600;
  text-align: center;
}

.quick-commands {
  display: flex;
  gap: $elderly-spacing-sm;
  margin-top: $elderly-spacing-base;
  width: 100%;
  justify-content: center;
}

.command-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $elderly-spacing-sm;
  min-width: $elderly-touch-sm;
  min-height: $elderly-touch-sm;
  background: $elderly-bg-secondary;
  border-radius: $elderly-radius-base;
  border: 2rpx solid $elderly-border;
}

.command-icon {
  font-size: $elderly-font-lg;
  margin-bottom: 4rpx;
}

.command-label {
  color: $elderly-text-secondary;
  font-size: $elderly-font-xs;
  text-align: center;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes recognizing {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
</style>


